<template>
  <div class="data-container">
    <el-card class="data-card">
      <p slot="header">时间利用率</p>
      <p class="data-value">{{ timeRate }}%</p>
    </el-card>
    <el-card class="data-card">
      <p slot="header">工作行程率</p>
      <p class="data-value">{{ workRate }}%</p>
    </el-card>
    <el-card class="data-card">
      <p slot="header">深耕合格率</p>
      <p class="data-value">{{ passRate }}%</p>
    </el-card>
  </div>
</template>
    
    <script>
    import userApi from "../../api/sys";
    export default {
      data() {
        return {
          timeRate: 0,
          workRate: 0,
          passRate: 0,
        }
      },
      methods: {
        getList() {
          userApi.compute3(this.searchModel).then((resp) => {
            const responseData = resp.data.rows[0]; 
            this.timeRate = responseData.timeRate;
            this.workRate = responseData.workRate;
            this.passRate = responseData.passRate;
          })
        },
      },
      created() {
        this.getList();
      },
    }
    </script>
    
<style scoped>
.data-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px;
}

.data-card {
  width: 300px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}
</style>